<template>
  <div class="container">
    <a-date-picker
      id="date__change"
      @change="onChange"
      :defaultValue="moment(getCurrentData(), 'YYYY - MM - DD')"
      :allowClear="false"
    />
    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      :pagination="false"
      :loading="loading"
      :scroll="{ x: 1000 }"
    >
      <!--<span v-for="slotItem in slotArr" :key="slotItem.key" :slot="slotItem.key" slot-scope="text, record">
        <div v-if="text">
          <a-tooltip>
            <template slot="title"> {{ text.split('-')[1] }}</template>
            {{ text.split('-')[0] }}
          </a-tooltip>-->
      <!-- <a-popover title="备注信息">
            <template slot="content">
              <span>{{ text.split('-')[1] }}</span>
            </template>
            <button>{{ text.split('-')[0] }}</button>
          </a-popover> -->
      <!--</div>
      </span>-->
    </a-table>

    <!--<a-divider orientation="left">注意事项</a-divider>

    <div class="tip" :style="{ marginLeft: '2rem' }">
      <span v-html="attention.attentionContent"></span>
    </div>-->
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import moment from 'moment'

const data = []

export default {
  name: 'Reservation',
  components: {},
  data() {
    const messageContent = (value, row, index, field) => {
      let element = ''
      if (value) {
        element = (
          <a-tooltip>
            <template slot="title">{value.split('-')[1]}</template>
            {value.split('-')[0]}
          </a-tooltip>
        )
      }

      const obj = {
        children: element, // 这是渲染列的值，支持渲染html
        attrs: {} // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
      }
      return obj
    }

    return {
      columns: [
        {
          title: '时间/星期',
          dataIndex: 'time',
          align: 'center',
          width: 190
        },
        {
          title: '星期一',
          dataIndex: '1',
          align: 'center',
          width: 150,
          customRender: (value, row, index) => messageContent(value, row, index, '1')
        },
        {
          title: '星期二',
          align: 'center',
          dataIndex: '2',
          width: 150,
          customRender: (value, row, index) => messageContent(value, row, index, '2')
        },
        {
          title: '星期三',
          align: 'center',
          dataIndex: '3',
          width: 150,
          customRender: (value, row, index) => messageContent(value, row, index, '3')
        },
        {
          title: '星期四',
          align: 'center',
          dataIndex: '4',
          width: 150,
          customRender: (value, row, index) => messageContent(value, row, index, '4')
        },
        {
          title: '星期五',
          align: 'center',
          dataIndex: '5',
          width: 150,
          customRender: (value, row, index) => messageContent(value, row, index, '5')
        },
        {
          title: '星期六',
          align: 'center',
          dataIndex: '6',
          width: 150,
          customRender: (value, row, index) => messageContent(value, row, index, '6')
        },
        {
          title: '星期日',
          align: 'center',
          dataIndex: '7',
          width: 150,
          customRender: (value, row, index) => messageContent(value, row, index, '7')
        }
      ],
      data,
      dpData: [],
      attention: {},
      loading: false,
      moment,
      slotArr: []
    }
  },
  created() {
    this.getData({ doctorId: this.doctorId(), orgCode: this.orgCode() }).catch(error => {
      console.log(error)
    })
  },
  methods: {
    ...mapGetters(['doctorId', 'orgCode']),
    async getData(params) {
      console.log('Reservation.vue.getData.', JSON.stringify(params))
      this.loading = true

      this.data = []

      const res = await getAction('flup/doctor/schedule', params)

      if (res.success) {
        console.log(res)

        this.loading = false

        this.dpData = await res.result.schedule

        //      this.columns[0].fixed = 'left'

        let nowData = JSON.parse(JSON.stringify(this.dpData))

        let doctorList = nowData.map((item, index) => {
          return {
            doctorId: item.doctorId,
            doctorName: item.doctorName
          }
        })

        //      for (let i = 1; i <= 5; ++i) {
        //        this.columns[i].dataIndex =`${doctorList[0].doctorId}${i}`
        // if(i==1) {
        //   console.log("Reservation.vue.getData.",JSON.stringify(doctorList[0]));
        // }
        // this.columns[i].children = doctorList.map((item, index) => {
        //   this.slotArr.push({
        //     key: `${item.doctorId}${i}`,
        //   })
        //
        //   return {
        //     title: item.doctorName,
        //     key: `${item.doctorId}${i}`,
        //     dataIndex: `${item.doctorId}${i}`,
        //     align: 'center',
        //     width: 165,
        //     scopedSlots: { customRender: `${item.doctorId}${i}` },
        //   }
        // })
        // if(i==1) {
        //   console.log("Reservation.vue.getData.",JSON.stringify(this.columns[i].children));
        // }
        //      }
        let timeList = new Map([
          [0, '8:50-9:10'],
          [1, '9:10-9:30'],
          [2, '9:30-9:50'],
          [3, '9:50-10:10'],
          [4, '10:10-10:30'],
          [5, '10:30-10:50'],
          [6, '10:50-11:10'],
          [7, '11:10-11:30'],
          [8, '11:30-11:50'],
          [9, '14:00-14:20'],
          [10, '14:20-14:40'],
          [11, '14:40-15:00'],
          [12, '15:00-15:20'],
          [13, '15:20-15:40'],
          [14, '15:40-16:00'],
          [15, '16:00-16:20'],
          [16, '16:20-16:40'],
          [17, '16:40-17:00'],
          [18, '17:00-17:20']
        ])

        for (let i = 0; i <= 18; i++) {
          this.data.push({
            key: i,
            time: timeList.get(i)
          })
        }

        // this.data.length = 19

        let problems = []

        nowData.map((item, index) => {
          if (item.flupRecord.length != 0) {
            item.flupRecord.map((dateItem, index) => {
              dateItem.patientFlupInfoList.map((problem, index) => {
                problems.push({
                  doctorId: item.doctorId,
                  patientId: problem.patientId,
                  flupDate: problem.flupDate,
                  flupTime: problem.flupTime,
                  flupTemplateId: problem.flupTemplateId,
                  name: problem.name,
                  remark: problem.remark
                })
              })
            })
          }
        })
        problems.map((item, index) => {
          let day = this.dateToDay(item.flupDate)
          let row = item.flupTime
          let message = item.name
          if (item.remark != null && item.remark != '') {
            message = `${message}-${item.remark}`
          }
          this.data[row - 1][`${day}`] = message
          //        this.data[row - 1][`${item.doctorId}${day}${day}`] = message
        })
        this.attention = await res.result.attention
        console.log('data', this.data)
      } else {
        return
      }
    },

    dateToDay(str) {
      return new Date(str).getDay()
    },

    async onChange(date, dateString) {
      this.getData({
        date: dateString,
        doctorId: this.doctorId(),
        orgCode: this.orgCode()
      })
    },
    getCurrentData() {
      return new Date().toLocaleDateString()
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  background-color: #fff;
  padding: 1rem;

  #date__change {
    width: 278px;
    margin-bottom: 1rem;
  }

  .tip {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
</style>

